import React, { useCallback } from "react";
import { Menu, ActivityIndicator, NavBar } from "antd-mobile";
import { withRouter } from 'react-router-dom'

const data = [
  {
    value: "1",
    label: "食物栏",
    children: [
      {
        label: "食物管理",
        value: "1",
        disabled: false,
        path: '/food'
      },
    ],
  },
  {
    value: "2",
    label: "用户栏",
    children: [
      {
        label: "用户管理",
        value: "1",
        disabled: false,
        path: '/user'
      },
    ],
  },
  {
    value: "3",
    label: "分类栏",
    children: [
      {
        label: "分类管理",
        value: "1",
        disabled: false,
        path: '/cate'
      },
    ],
  },
  {
    value: "4",
    label: "订单栏",
    children: [
      {
        label: "订单管理",
        value: "1",
        disabled: false,
        path: '/order'
      },
    ],
  },
];

class MenuContainer extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      initData: "",
      show: false,
    };
  }
  onChange = (value) => {
    const { history } = this.props
    let label = "";
    let path = ""
    data.forEach((dataItem) => {
      if (dataItem.value === value[0]) {
        label = dataItem.label;
        if (dataItem.children && value[1]) {
          dataItem.children.forEach((cItem) => {
            if (cItem.value === value[1]) {
              label += ` ${cItem.label}`;
              path = cItem.path
            }
          });
        }
      }
    });
    console.log(label);
    history.push(path)


    this.setState({
      show: false,
    });
    
  };
  handleClick = (e) => {
    e.preventDefault(); // Fix event propagation on Android
    this.setState({
      show: !this.state.show,
    });
    // mock for async data loading
    if (!this.state.initData) {
      this.setState({
        initData: data,
      });
    }
  };

  onMaskClick = () => {
    this.setState({
      show: false,
    });
  };

  render() {
    const { initData, show } = this.state;
    const menuEl = (
      <Menu
        className="foo-menu"
        data={initData}
        value={["1", "3"]}
        onChange={this.onChange}
        height={document.documentElement.clientHeight * 0.6}
      />
    );
    const loadingEl = (
      <div
        style={{
          width: "100%",
          height: document.documentElement.clientHeight * 0.6,
          display: "flex",
          justifyContent: "center",
        }}
      >
        <ActivityIndicator size="large" />
      </div>
    );
    return (
      <div className={show ? "menu-active" : ""}>
        <div>
          <NavBar
            leftContent="菜单"
            mode="light"
            icon={
              <img
                src="https://gw.alipayobjects.com/zos/rmsportal/iXVHARNNlmdCGnwWxQPH.svg"
                className="am-icon am-icon-md"
                alt=""
              />
            }
            onLeftClick={this.handleClick}
            className="top-nav-bar"
          >
            味好佳后台系统
          </NavBar>
        </div>
        {show ? (initData ? menuEl : loadingEl) : null}
        {show ? <div className="menu-mask" onClick={this.onMaskClick} /> : null}
      </div>
    );
  }
}

export default withRouter(MenuContainer);
